<template>
  <div>
    <!-- 利用递归动态创建菜单 -->
    <!-- 多级菜单 -->
    <el-submenu v-if="menu.children.length>=1" :index="menu.menuId+''">
      <template slot="title">
        <i :class="menu.icon"></i>
        <span slot="title">{{ menu.name }}</span>
      </template>
      <MenuTree v-for="item in menu.children" :key="item.menuId" :menu="item"></MenuTree>
      <!-- <el-menu-item index="1-1" @click="$router.push('user')"
        >用户管理</el-menu-item
      >
      <el-menu-item index="1-2" @click="$router.push('dept')"
        >机构管理</el-menu-item
      >
      <el-menu-item index="1-3" @click="$router.push('role')"
        >角色管理</el-menu-item
      >
      <el-menu-item index="1-4" @click="$router.push('menu')"
        >菜单管理</el-menu-item
      >
      <el-menu-item index="1-5" @click="$router.push('log')"
        >日志管理</el-menu-item
      > -->
    </el-submenu>
    <!-- 只有一级菜单 -->
    <el-menu-item :index="menu.menuId+''" v-else @click="handleRouter(menu)">
      <i :class="menu.icon"></i>
      <span slot="title">{{menu.name}}</span>
    </el-menu-item>
    <!-- <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span slot="title">系统监控</span>
      </template>
      <el-menu-item index="1-1">数据监控</el-menu-item>
      <el-menu-item index="1-2">服务监控</el-menu-item>
    </el-submenu> -->
    <!-- <el-menu-item index="3" disabled>
      <i class="el-icon-document"></i>
      <span slot="title">剑道万古如长夜</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <span slot="title">万剑归宗</span>
    </el-menu-item> -->
  </div>
</template>

<script>
export default {
  name: "MenuTree",
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  data() {
    return {};
  },
  methods: {
    handleRouter(menu) {
       // 通过菜单URL跳转至指定路由
      this.$router.push(menu.url)
    }
  },
};
</script>
